<html>
<head>
    <link rel="stylesheet" href="/css/base.css">
    <script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript">
jQuery(function(){
    $(':file').change(function(){
        var file = this.files[0];
        name = file.name;
        size = file.size;
        type = file.type;
        console.log(file.type);
        //your validation
    });

    $(':button').click(function(){
        var formData = new FormData($('form')[0]);
        formData.append("parent_id", 2);

        $.ajax({
            url: '/api/file/save',  //server script to process data
            type: 'POST',
            xhr: function() {  // custom xhr
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // check if upload property exists
                    myXhr.upload.addEventListener('progress', function(e){
                        if(e.lengthComputable){
                            //get the progress
                            var loadedPercent = parseInt((e.loaded/(e.total/100)));

                            //progress bar max width
                            var intMaxWidth = 500;
                            var intPercentWidth = (intMaxWidth/100);

                            //update the progress bar
                            jQuery('.progress-bar .progress').css("width", (intPercentWidth * loadedPercent) + "px");
                        }
                    }, false); // for handling the progress of the upload
                }
                return myXhr;
            },
            //Ajax events
            success: function(data) {
                alert("Success! " + data.data);
            },
            error: function() {
                alert("Error!");
            },
            // Form data
            data: formData,
            //Options to tell JQuery not to process data or worry about content-type
            cache: false,
            contentType: false,
            processData: false
        });
    });
});
</script>
</head>
<body>

<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>

<div class="progress-bar">
    <div class="progress-bg">
        <div class="progress"></div>
    </div>
</div>

</body>
</html>